<template>
  <view class="con">
    <view style="background-color: #fff; padding: 0 32rpx" :style="{ height: navHeight + 84 + 'px' }">
      <view class="header" :style="{ paddingTop: customTop + 'px' }">
        <view class="searchBox" @click="goPage('/pages/home/searchPage')">
          <u-input readonly placeholder="搜索内容" border="none" shape="circle" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #A8A8A8"></u-input>
        </view>
        <u-tabs
          :list="tabList"
          @click="tabTypeClick"
          :activeStyle="{
            color: '#1E1E1E',
            fontWeight: 'bold',
            transform: 'scale(1.18)',
          }"
          :inactiveStyle="{
            color: '#BEBEBE',
          }"
          lineWidth="28"
          lineHeight="4"
          lineColor="linear-gradient(90deg, rgba(66,110,254,0.5) 0%, #426EFE 100%)"
        ></u-tabs>
        <u-tabs
          :list="gcList"
          lineWidth="66"
          lineHeight="25"
          lineColor="#f2f5ff"
          @click="tabgcClick"
          :activeStyle="{
            color: '#1676FD',
            fontWeight: 'bold',
          }"
          :inactiveStyle="{
            color: '#606266',
          }"
          itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;z-index:2;"
        >
        </u-tabs>
      </view>
    </view>
    <view class="main" style="padding-bottom: 100rpx">
      <template v-if="orderList?.length > 0">
        <view class="commonBox" v-for="(item, index) in orderList" :key="index" @click="goPage(`/pages/findOrder/orderDetails?id=${item.id}`)">
          <view class="dtBox">
            <image class="img" :src="item.fileList[0]" v-if="item.fileList[0]" mode="scaleToFill"></image>
            <view class="right">
              <view class="title">{{ item.content }}</view>
              <view class="date">{{ dayjs(item.createTime).format("YYYY-MM-DD") }} {{ item.city }} {{ item.name }}</view>
            </view>
          </view>
          <view class="buttomCn">
            <view class="leftText">已有{{ item.viewedCount || 0 }}人查看</view>
            <view class="lookBtn"><u-icon name="chat" color="#fff" size="24"></u-icon><text>查看联系</text> </view>
          </view>
        </view>
        <u-loadmore height="30" :status="status" />
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center">
        <u-empty mode="list"></u-empty>
      </view>
    </view>
    <view class="anchorBox" style="left: 80rpx" @click="addPostFn('1')">
      <image src="../../static/findJob/gy.png" mode="scaleToFill" />
      <view>
        <view class="t">我有供应</view>
        <view class="b">免费货源入驻</view>
      </view>
    </view>
    <view class="anchorBox rihtAnchorBox" @click="addPostFn('2')">
      <image src="../../static/findJob/qg.png" mode="scaleToFill" />
      <view>
        <view class="t">我要求购</view>
        <view class="b">需求快速撮合</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getTopHeight, goPage } from "../../utils/commonFn";
import { getIndustryList } from "@/api/my";
//@ts-ignore
import { onReachBottom } from "@dcloudio/uni-app";
import { getPostList } from "@/api/order";
import dayjs from "dayjs";
const { navHeight, customTop, customRight } = getTopHeight();

const tabList = ref([
  {
    id: "1",
    name: "供应",
  },
  {
    id: "2",
    name: "求购",
  },
]);
const gcList = ref([
  {
    id: 999999999,
    image: "",
    name: "推荐",
    isActive: false,
  },
]);
onMounted(async () => {
  const res = await getIndustryList();
  res.data.forEach((item) => {
    item.list.forEach((i) => {
      gcList.value.push(i);
    });
  });
  rest();
});
const addPostFn = (type: string) => {
  const userInfo: myTypes.userInfo = uni.getStorageSync("userInfo");
  if (!userInfo.mobile) {
    uni.showModal({
      title: "提示",
      cancelText: "否",
      confirmText: "是",
      content: "您当前未登录，是否前往登录",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/login");
        }
      },
    });
    return;
  }
  if (userInfo.cardFlag == 0) {
    uni.showModal({
      title: "提示",
      cancelText: "否",
      confirmText: "是",
      content: "您当前还没有名片，是否前往创建",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/MyBusinessCard/createBusinessCard");
        }
      },
    });
    return;
  }
  if (userInfo.authFlag == "0") {
    uni.showModal({
      title: "提示",
      cancelText: "否",
      confirmText: "是",
      content: "您当前还未实名认证，是否前往",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/businessCardAuth");
        }
      },
    });
    return;
  }
  if (userInfo.level !== "1") {
    uni.showModal({
      title: "提示",
      cancelText: "否",
      confirmText: "是",
      content: "您未开通会员，是否前往",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/activateMembership");
        }
      },
    });
    return;
  }
  goPage(`/pages/myPage/myPosts/addPost?pageType=${type}`);
};
const formData = ref({
  pageNum: 1,
  pageSize: 10,
  type: "1",
  industryId: "",
});
const status = ref("loadmore");
const orderList = ref<orderTypes.orderDetails[]>([]);
const getList = async () => {
  status.value = "loadmore";
  const res = await getPostList(formData.value);
  orderList.value = orderList.value.concat(res.rows);
  if (orderList.value.length >= (res.total as number)) {
    status.value = "nomore";
  } else {
    status.value = "loadmore";
  }
};
const rest = () => {
  formData.value.pageNum = 1;
  orderList.value = [];
  status.value = "loadmore";
  getList();
};
onReachBottom(() => {
  formData.value.pageNum++;
  getList();
});
const tabTypeClick = (e: any) => {
  formData.value.type = e.id;
  rest();
};
const tabgcClick = (e: any) => {
  if (e.id === 999999999) {
    e.id = "";
  }
  formData.value.industryId = e.id;
  rest();
};
tabgcClick;
</script>

<style lang="less" scoped>
.con {
  position: relative;
}
.header {
  width: 100%;
  display: flex;
  flex-direction: column;
  .searchBox {
    width: 70%;
    /deep/ .u-input {
      background: #f7f8fa;
      width: 100%;
      padding: 12rpx !important;
      margin-right: 10rpx;
    }
  }
  /deep/ .u-tabs__wrapper__nav__line {
    z-index: 1;
    bottom: 3px;
  }
}
.dtBox {
  display: flex;
  .img {
    width: 208rpx;
    height: 208rpx;
    border-radius: 16rpx;
    margin-right: 32rpx;
  }
  .right {
    width: calc(100% - 238rpx);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      font-size: 28rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #1e1e1e;
      line-height: 46rpx;
    }
    .date {
      font-size: 22rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #bebebe;
      line-height: 32rpx;
      margin-top: 16rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
}
.buttomCn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f7f9;
  border-radius: 16rpx;
  padding: 16rpx 24rpx;
  margin-top: 32rpx;
  .leftText {
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #4fcfbb;
    line-height: 34rpx;
  }
}
.anchorBox {
  box-sizing: border-box;
  position: fixed;
  bottom: 48rpx;
  width: 274rpx;
  background: linear-gradient(135deg, #68d6ba 0%, #03b58a 100%);
  border-radius: 56rpx;
  display: flex;
  align-items: center;
  padding: 10rpx 24rpx;
  image {
    width: 44rpx;
    height: 44rpx;
    margin-right: 20rpx;
  }
  .t {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    line-height: 40rpx;
  }
  .b {
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 46rpx;
  }
}
.rihtAnchorBox {
  background: linear-gradient(135deg, #099cff 0%, #1bc2ff 100%);
  right: 80rpx;
}
</style>
